<template>
  <div>
    <div class="staff-top-item-wrapper">
      <div v-for="(item, index) in dataList" :key="index" class="staff-top-item">
        <div :class="cardClass(index)">
          <div class="staff-top-item-icon">
            <img :src="item.img" class="imgBox" />
          </div>
          <div class="item-top-item-box">
            <div class="staff-top-item-name">{{ item.name }}</div>
            <div class="staff-top-item-num">{{ item.num }}</div>
          </div>
          <div class="staff-top-item-background">
            <img :src="background" class="backgroundImg" />
          </div>
          <div class="staff-top-item-bottom" v-if="dateBox.startMonth === dateBox.endMonth && dateBox.startYear === dateBox.endYear">
            <div class="img" style="font-size:12px;margin-top:3px" v-if="item.compareNum !== '--'">
              上月
              <img :src="upImg" v-if="item.compareNum > 0" style="height:12px;width:12px;margin-bottom:3px" />
              <img :src="downImg" v-if="item.compareNum < 0" style="height:12px;width:12px;margin-bottom:3px" />
              <span v-if="item.compareNum > 0" style="color:#FF5550FF">{{ item.compareNum }}</span>
              <span v-if="item.compareNum < 0" style="color:#24CDAAFF">{{ item.compareNum }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const dataList = [
  {
    img: require("@/assets/img/statistic/shebao.png"),
    name: "社保总计（元）",
    num: "",
    compareNum: ""
  },
  {
    img: require("@/assets/img/statistic/gongjijin.png"),
    name: "公积金总计（元）",
    num: "",
    compareNum: ""
  },
  {
    img: require("@/assets/img/statistic/canbaoren.png"),
    name: "参保人次（人）",
    num: "",
    compareNum: ""
  },
  {
    img: require("@/assets/img/statistic/up.png"),
    name: "增员（人）",
    num: "",
    compareNum: ""
  },
  {
    img: require("@/assets/img/statistic/down.png"),
    name: "减员（人）",
    num: "",
    compareNum: ""
  }
];
import { selectAmount } from "@/api/shebao/statistic";
export default {
  props: {
    dateBox: {
      type: Object,
      default() {
        return {
          dataOfNum: []
        };
      }
    },
    queryType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      upImg: require("@/assets/img/statistic/rise.png"),
      downImg: require("@/assets/img/statistic/down2.png"),
      companyId: this.$store.state.hr.companyId,
      background: require("@/assets/img/statistic/yuan.png"),
      dataList
    };
  },

  watch: {
    dateBox: {
      handler: function(val, oldVal) {
        this.getSelectAmount();
      },
      deep: true
    },
    queryType: {
      handler: function(val, oldVal) {
        this.getSelectAmount();
      },
      deep: true
    }
  },

  methods: {
    getSelectAmount() {
      selectAmount({
        companyId: this.companyId,
        startMonth: this.dateBox.startMonth,
        endMonth: this.dateBox.endMonth,
        startYear: this.dateBox.startYear,
        endYear: this.dateBox.endYear,
        queryType: this.queryType,
        step: this.dateBox.step,
        isAcrossYear: this.dateBox.startYear !== this.dateBox.endYear
      }).then(res => {
        this.dataOfNum = res.data;

        if (this.queryType === 1) {
          this.dataList[0].num = res.data.socAmount ? res.data.socAmount : "--";
          this.dataList[0].compareNum = res.data.beforeSocAmount ? res.data.beforeSocAmount : "--";
          this.dataList[1].compareNum = res.data.beforePfAmount ? res.data.beforePfAmount : "--";
          this.dataList[1].num = res.data.pfAmount ? res.data.pfAmount : "--";
        }
        if (this.queryType === 2) {
          this.dataList[0].num = res.data.companySocAmount ? res.data.companySocAmount : "--";
          this.dataList[0].compareNum = res.data.companySocAmount ? res.data.companySocAmount : "--";
          this.dataList[1].compareNum = res.data.beforeCompanyPfAmount ? res.data.beforeCompanyPfAmount : "--";
          this.dataList[1].num = res.data.companyPfAmount ? res.data.companyPfAmount : "--";
        }
        if (this.queryType === 3) {
          this.dataList[0].num = res.data.personalSocAmount ? res.data.personalSocAmount : "--";
          this.dataList[0].compareNum = res.data.beforePersonalSocAmount ? res.data.beforePersonalSocAmount : "--";
          this.dataList[1].compareNum = res.data.beforePersonalPfAmount ? res.data.beforePersonalPfAmount : "--";
          this.dataList[1].num = res.data.personalPfAmount ? res.data.personalPfAmount : "--";
        }
        this.dataList[2].compareNum = res.data.beforeEmpSocInfoCount ? res.data.beforeEmpSocInfoCount : "--";
        this.dataList[3].compareNum = res.data.beforeIncrement ? res.data.beforeIncrement : "--";
        this.dataList[4].compareNum = res.data.beforeRevoke ? res.data.beforeRevoke : "--";

        this.dataList[2].num = res.data.empSocInfoCount ? res.data.empSocInfoCount : "--";
        this.dataList[3].num = res.data.increment ? res.data.increment : "--";
        this.dataList[4].num = res.data.revoke ? res.data.revoke : "--";
      });
    },
    cardClass(index) {
      if (index === 0) return "staff-top-item-one staff-top-item";
      else if (index === 1) {
        return "staff-top-item-two staff-top-item";
      } else if (index === 2) {
        return "staff-top-item-three staff-top-item";
      } else if (index === 3) {
        return "staff-top-item-four staff-top-secondItem";
      } else if (index === 4) {
        return "staff-top-item-five staff-top-thirdItem";
      }
    }
  }
};
</script>

<style scoped lang="scss">
.staff-top-item-bottom {
  border-radius: 0 0 6px 6px;
  border-color: none;
  width: 100%;
  height: 25px;
  background: #fff;
  position: absolute;
  opacity: 0.75;
  bottom: 0;
  .img {
    margin-left: 80px;
  }
}
.staff-top-item-background {
  position: absolute;
  bottom: 0;
  right: 0;
  .backgroundImg {
    width: 200px;
    height: 100px;
  }
}
.staff-top-item-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.item-top-item-box {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  .staff-top-item-name {
    color: #fff;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .staff-top-item-num {
    color: #fff;
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
  }
}
.staff-top-item-icon {
  margin-left: 15px;
  .imgBox {
    width: 45px;
    height: 45px;
  }
}
.staff-top-item {
  width: 92%;
  padding: 25px 0 0 0px;
  border-radius: 8px;
  height: 110px;
  display: flex;
  position: relative;
}
.staff-top-secondItem {
  display: flex;
  border-radius: 8px 0 0 8px;
  width: 100%;
  padding: 25px 0 25px 0;
  height: 110px;
  .staff-top-item-icon {
    margin-left: 40px;
    .imgBox {
      width: 55px;
      height: 55px;
    }
  }
  .item-top-item-box {
    border-right: 1px solid #e8e8e8ff;
    width: 100%;
    .staff-top-item-name {
      color: #222222ff;
    }
    .staff-top-item-num {
      color: #252525ff;
    }
  }
}
.staff-top-thirdItem {
  display: flex;
  border-radius: 0 8px 8px 0;
  width: 100%;
  padding: 25px 0 0 0px;
  height: 110px;
  .staff-top-item-icon {
    margin-left: 40px;
    .imgBox {
      width: 55px;
      height: 55px;
    }
  }
  .staff-top-item-name {
    color: #222222ff;
  }
  .staff-top-item-num {
    color: #252525ff;
  }
}
.staff-top-item-one {
  background: linear-gradient(311deg, var(--primary77) 0%, var(--primary) 100%);
}
.staff-top-item-two {
  background: linear-gradient(311deg, #fbbd49 0%, #ffa600 100%);
}
.staff-top-item-three {
  background: linear-gradient(311deg, #6c9eff 0%, #4282ff 100%);
}
.staff-top-item-four,
.staff-top-item-five {
  background: #ffffffff;
  .staff-top-item-bottom {
    width: 40%;
    height: 25px;
    background: #fff;
    position: absolute;
    opacity: 0.75;
    bottom: 5px;
    right: 0;
    .img {
      position: relative;
      right: 90%;
      width: 70px;
      font-size: 12px;
    }
  }
}
</style>
